<template>
  <div id="editNostro">
    <div class="homeTitle">存放同业交易申请</div>
    
    <div class="tableBox">
      <div>
        <div class="tableTitle">申请人信息： </div>
      <el-form class="formlist" :model="formData1"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList1" :key="item.label" :label="item.label" :prop="item.prop">
                    {{formData1[item.prop]}}
                    </el-form-item>
           </el-form>
      </div>
       <div>
        <div class="tableTitle">交易类型及方式：</div>
        <formList :formData = 'TypeData' @selectChange='selectType' :formList = 'TypeList' parentClass = 'formll'></formList>
      </div>
       <div v-if="showsec">
         <div class="tableTitle">交易信息： </div>
          <el-form class="formlist" :model="formData2"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList2" :key="item.label" :label="item.label" :prop="item.prop">
                    <template v-if="item.btn">
                       <span style="margin-left:-30px;margin-right:45px">{{formData2[item.prop]}}</span>
                        <el-button type="text" @click="selectAginst">点击选择</el-button>
                    </template>
                    <template v-else-if="item.input">
                        <el-input type="text" placeholder="请输入" v-model="formData2[item.prop]">点击选择</el-input>
                    </template>
                    <template v-else>{{formData2[item.prop] ? formData2[item.prop] : '暂无数据'}}</template>
                    </el-form-item>
           </el-form>
      </div>
    
      <div v-else>
        <div class="tableTitle">交易信息：</div>
        <el-form class="formlist" :model="formData"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList" :key="item.label" :label="item.label" :prop="item.prop">
                    <template v-if="item.btn">
                        <span style="margin-left:-30px;margin-right:45px">{{formData['accountNo']}}</span>
                        <el-button type="text" @click="selectAginst">点击选择</el-button>
                    </template>
                    <template v-else-if="item.input">
                        <el-input type="text" :disabled="item.disabled" placeholder="请输入" v-model="formData[item.prop]"></el-input>
                    </template>
                    <el-date-picker  v-else-if="item.date"
                        style="width:100%"
                        v-model="formData[item.prop]"
                        type="date"
                        :disabled="item.disabled"
                        @change="jsDate"
                        placeholder="选择日期">
                    </el-date-picker>
                     <div style="display:flex" v-else-if='item.inputsel'>
                        <el-input v-model='formData[item.prop]' @input="jsDate" placeholder='请输入'></el-input>
                        <el-select style="border-left:1px solid #efefef"  v-model="formData[item.prop2]" >
                             <el-option  v-for="option in item.options" :key = "option.label" :label="option.label" :value="option.value"></el-option>
                        </el-select>
                    </div>
                    <template v-else>{{formData[item.prop] ? formData[item.prop] : '暂无数据'}}</template>
                    </el-form-item>
           </el-form>
    </div>
 <div style="width:98%">
        <div class="tableTitle">审核记录</div>
        <el-table ref="singleTable" :data="recordShen" border   style="width: 100%">
            <el-table-column prop="userRole" label="审核角色" align="center"></el-table-column>
            <el-table-column prop="userName" label="用户名称" align="center"></el-table-column>
            <el-table-column prop="content" label="审核意见" align="center"></el-table-column>
            <el-table-column prop="createTime" label="审核时间" align="center"></el-table-column>
          </el-table>
       </div>
     <div class="riskTip" style="width:98%">
            <div class="fxtq tableTitle"><span style="color:red">*</span>申请事由：</div>
            <div class="fxcon">
              <el-input type="textarea" placeholder="请输入申请事由" v-model="reason"></el-input>
            </div>
        </div>
       <div class="riskTip" style="width:98%" v-show="tishiMessage != ''">
        <div class="fxtq tableTitle">风险提醒：</div>
        <div class="fxcon">
          <p>{{tishiMessage}}</p>
        </div>
      </div>
      <el-dialog title="选择下一待办人" :visible.sync="nextManager" width="30%" center>
          <div v-show="nextManager">
           <el-radio-group v-model="nextUserId">
            <el-radio v-for="item in tableData" :key="item.id"  :label="item.id">
              <span class="user_name">{{item.name}}</span>
              <span class="user_part">{{item.department}}</span>
              </el-radio>
          </el-radio-group>
          
        </div>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addApply" size="small">确认</el-button>
          <el-button @click="cancleNext"  size="small">取 消</el-button>
      </span>
      </el-dialog>
      <div class="btn">
        <!-- <el-button type="primary" size="small" @click="close">暂存</el-button> -->
        <el-button type="primary"  size="small" @click="submitPost">提交</el-button>
        <el-button type="primary" @click="goback" size="small">取消</el-button>
      </div>
    </div>
    <el-dialog :title="diatitle" :visible.sync="centerDialogVisible"  center>
      <div class="DiaFxcon">
        <p>{{tishiMessage}}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getFlow" size="small">继续</el-button>
        <el-button @click="centerDialogVisible = false" size="small">取 消</el-button>
      </span>
    </el-dialog>
   
  </div>
</template>
<script>
export default {
  name: "accountDetail",
  data() {
    return {
      centerDialogVisible: false,
      nextManager: false,
      tableData: [],
      nextUserId: '',
      step: 1,
      isAuthorization: 2,
      
      rules:{

      },
      diatitle:'',
      tishiMessage:'',
      formList1: [
        {label: '机构编号', prop: 'no', value:''},{label: '机构名称', prop: 'bank', value:''},
        {label: '操作员工号', prop: 'jobNum', value:''},{label: '操作员姓名', prop: 'name', value:''},
      ],
        recordShen:[],
      formData1: {},
      TypeList: [
        {label : '交易类型', value:'hhh', prop:'transactionType', select: true,
        options: [
            {label: '存入', value: '存入'},
            {label: '存出', value: '存出'}
        ]},
        {label : '存款方式', value:'hhh', prop:'depositMethod', select: true,
        options: [
            {label: '活期', value: '活期'},
            {label: '定期', value: '定期'}
        ]},
      ],
      TypeData: {
        depositMethod: '活期',
        transactionType: ''
      },
      formList2: [
        {label: '活期账号', prop: 'accountNo', value:'', btn: true},{label: '机构标识', prop: 'agencyLabel', value:''},
        {label: '账户名称', prop: 'accountName', value:''},{label: '机构类型', prop: 'agencyType', value:''},
         {label: '机构名称', prop: 'agencyName', value:''},{label: '开户行', prop: 'accountBank', value:''},
        {label: '计息基础', prop: 'interestBase', value:''},
        {label: '利率（%）', prop: 'interestRate', value:''},{label: '账户余额(元)', prop: 'accountBalance', value:''},
        {label: ' 本次交易金额(元)', prop: 'tradeValue', value:'', input: true}
      ],
      formData2: {},
    
      formData:{
        currency: 'CNY',
        dan: '日'
      },
        formList: [
        {label: '定期账号', prop: 'accountNo', value:'', btn: true},
        {label : '机构标识', value:'hhh', prop:'agencyLabel'},
        {label : '机构类型', value:'hhh', prop:'agencyType'},
         
         {label : '机构名称', value:'是', prop:'agencyName'},
        {label : '开户行', value:'是', prop:'accountBank'},
        {label : '本次交易金额(元)', value:'是', prop:'tradeValue',input: true},
        {label : '交易利率（%）', value:'是', prop:'interestRate'},
        {label : '起息日期', value:'是', prop:'startInterestDate',date: true}, 
        
         {label : ' 期限', value:'hhh', prop:'term', prop2: 'dan', inputsel: true,
         options: [
            {label: '日', value: '日'},
            // {label: '月', value: '月'},
            // {label: '年', value: '年'}
        ]},
        // {label : '到期日期', value:'是', disabled: true, prop:'dueDate',input: true}, 
        {label : '计息基础', value:'hhh', prop:'interestBase'},
         {label : '结息方式', value:'hhh', prop:'interestMethod', select: true},
        {label : '结息频率', value:'hhh', prop:'interestFreq', select: true},
        {label : '币种', value:'hhh', prop:'currencyType', select: true}
      ],
      multipleSelection: [],
      showsec: true,
      reason: ''
    };
  },
  
  methods: {
    goback() {
      this.clearSession()
      this.$router.go(-1)
      
    },
    selectType(val) {
     // 选择存款方式

     if(val == '定期') {
       this.showsec = false
     } else {
       this.showsec = true
     }
    },
      selectChange(val) {
        // 系统内外
           if(val == '系统内') {
              this.formList[1].options = [ 
                {label: '村镇银行', value: '村镇银行'},
                {label: '省外系统内-省级银行业存款类金融机构', value: '省外系统内-省级银行业存款类金融机构'},
                {label: '省外系统内-地市级银行业存款类金融机构', value: '省外系统内-地市级银行业存款类金融机构'},
                {label: '省外系统内-县级银行业存款类金融机构', value: '省外系统内-县级银行业存款类金融机构'},
                {label: '省外系统内-其他存款类金融机构', value: '省外系统内-其他存款类金融机构'},
              ]
              
           }else {
              this.formList[1].options = [
                    {label: '国有控股商业银行', value: '国有控股商业银行'},
                    {label: '全国性股份制商业银行', value: '全国性股份制商业银行'},
                    {label: '政策性银行', value: '政策性银行'},
                    {label: '城市商业银行', value: '城市商业银行'},
                    {label: '村镇银行', value: '村镇银行'},
                    {label: '其他银行业存款类金融机构', value: '其他银行业存款类金融机构'},
                    {label: '银行业非存款类金融机构', value: '银行业非存款类金融机构'},
                    {label: '证券业金融机构', value: '证券业金融机构'},
                    {label: '保险业金融机构', value: '保险业金融机构'},
                    {label: '交易及结算类金融机构', value: '交易及结算类金融机构'},
                    {label: '特殊目的载体金融机构', value: '特殊目的载体金融机构'},
                    {label: '小额贷款公司', value: '小额贷款公司'},
                    {label: '金融控股公司', value: '金融控股公司'},
                    {label: '境内其他金融机构', value: '境内其他金融机构'},
                    {label: '境外同业', value: '境外同业'}
              ]
           }
    },
    cancleNext() {
      this.nextManager = false;
    },
    
         //审核状态
    selectState(val) {
        if(val.state == 1 || val == '1') {
          return '已审批'
        }
        else{
          return '审批不通过'
        }
      },

    submitPost() {
         if(this.reason == '') {
          this.$message({
            type: 'warning',
            message: '请输入申请事由'
          })
          return
        }
         if(this.TypeData.depositMethod == '活期') {
            if(this.formData2.tradeValue == undefined || this.formData2.tradeValue == '') {
                  this.$message({
                    type: 'warning',
                    message: '请输入交易金额'
                  })
                  return
            }
            if(this.formData2.accountNo == undefined || this.formData2.accountNo == '' ) {
              this.$message({
                    type: 'warning',
                    message: '请选择活期账号'
                  })
                  return
            }
       } else {
           if(this.formData.tradeValue == undefined || this.formData.tradeValue == '') {
            this.$message({
              type: 'warning',
              message: '请输入交易金额'
            })
            return
          }
           if(this.formData.accountNo == undefined || this.formData.accountNo == '' ) {
              this.$message({
                    type: 'warning',
                    message: '请选择定期账号'
                  })
                  return
            }
             if(this.formData.startInterestDate == undefined || this.formData.startInterestDate == '' ) {
              this.$message({
                    type: 'warning',
                    message: '请输入起息日期'
                  })
                  return
            }
             if(this.formData.term == undefined || this.formData.term == '' ) {
              this.$message({
                    type: 'warning',
                    message: '请输入期限'
                  })
                  return
            } 
       }
      if(this.step == 1){
        //第一步
        let param = {}
        if(this.TypeData.depositMethod == '活期') {
          param = {
            agencyName: this.formData2['agencyName'],
            account: this.formData2['accountNo'],
            sumMoney: parseInt(this.formData2['tradeValue']),
            transactionType: this.TypeData['transactionType']
         }
        } else {
            param = {
            agencyName: this.formData['agencyName'],
            account: this.formData['currentAccount'],
            sumMoney: parseInt(this.formData['tradeValue']),
            transactionType: this.TypeData['transactionType']
         }
        }
        
      this.axios.get('storeInnerBankTradeApply/checkRisk', {params: param}).then((res) => {
          let data = res.data.data
          switch(data.state) {
            case '1':  this.$message({
                          type: 'warning',
                          message: data.msg
                        });break;
            case '2': this.isAuthorization = 1;
                      this.tishiMessage = data.msg
                      this.centerDialogVisible = true;
                      this.diatitle = '省联社授权提醒'
                      break;
            case '3': 
                       
                    this.$message({
                      type: 'warning',
                      message: data.msg
                    });
                    this.centerDialogVisible = true;
                    this.tishiMessage = data.msg
                    this.diatitle = '风险预警提醒'
                    break;
            case '4': 
                      //弹出下一列表
                      this.nextManager = true;
                      this.getNextUser()
                      break;
            case '5': 
                      this.$message({
                        type: 'warning',
                        message: data.msg
                      });
                      break;
            case '6': 
                      this.$message({
                        type: 'warning',
                        message: data.msg
                      });
                      break;
            default: break;
          }
      })
      }
      
      if(this.step == 2) {
      }
    },

    add0(m){return m<10?'0'+m:m },
    // 计算还款日
    jsDate(val) {
      let date = new Date(this.formData.startInterestDate)/1000 + 86400 * parseInt(val)
      var time = new Date(date*1000);
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();

      this.formData.dueDate = y+'-'+this.add0(m)+'-'+this.add0(d)
    },
    addApply() {
      
        //获取下一办理人成功
          //提交交易申请
        let param = {}
        if(this.TypeData.depositMethod == '活期') {
              this.formData2.nextUserId = this.nextUserId
              if(this.isAuthorization == 1 ){
                this.formData2.isAuthorization = 1
              }else {
                this.formData2.isAuthorization = 2
              }
              this.formData2.reason = this.reason
              this.formData2.currentAccount = this.formData2.accountNo
              
              param = Object.assign(this.TypeData, this.formData2)
              param.agencyId = this.formData2.agencyLabel
              param.tradeInterestRate = this.formData2.interestRate
        } else {
          this.formData.nextUserId = this.nextUserId
              if(this.isAuthorization == 1 ){
                this.formData.isAuthorization = 1
              }else {
                this.formData.isAuthorization = 2
              }
              this.formData.reason = this.reason
    
              param = Object.assign(this.TypeData, this.formData)
        }
        
        this.axios.post('storeInnerBankTradeApply/addStoreInnerBankTradeApply', param).then(res =>{
          if(res.data.code == 200) {
              this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.clearSession()
            this.$router.go(-1)
          }else {
            this.$message({
              type: 'error',
              message:'服务器出错或信息填写错误'
            })
          }
          
        })
    },
    getNextUser(flowId) {
      let param = {
        roleName: '交易员',
        flowId: flowId
      }
      this.axios.get('storeInnerBankTradeApply/getNextUser', {
        params: param
      }).then((res) => {
          this.tableData = res.data.data.nextUser
 
      })
    },
    getFlow() {
      // 开始第二步
       this.centerDialogVisible = false;
        this.nextManager = true;
        this.getNextUser()
    },
 
    close() {
      this.$router.go(-1);
    },
    
    selectAginst(){
       let type = this.TypeData.depositMethod
      if(type != undefined) {
        this.TypeData.reason = this.reason
        sessionStorage.setItem('typedata', JSON.stringify(this.TypeData))
        this.$router.push({path: 'selectNostro', query:{type: this.TypeData.depositMethod}})
      } else {
        this.$message({
          type: 'warning',
          message: '请选择存款方式'
        })
      }
    },
    clearSession() {
      sessionStorage.removeItem('accountId')
      sessionStorage.removeItem('typedata')
    },
     getAccountInfo(val) {
      let param = {
        id: val
      }
      this.axios.get('interbankAccount/selectApplyById', {
        params: param
      }).then(res => {
        this.formData2 = res.data.data
      })
    },
   getInterBankInfo(val) {
      //交易详情
      this.axios.get('bondApplyFlow/selectOne', {params: {
        applyId: val,
        model: '存放同业交易'
      }}).then((res) => {
        let {storeInnerBankTradeApply, user, list} = res.data.data

        this.TypeData.transactionType = storeInnerBankTradeApply.transactionType
        this.TypeData.depositMethod = storeInnerBankTradeApply.depositMethod
        
          if(this.TypeData.depositMethod == '活期') {
            this.showsec = true
            this.formData2 = storeInnerBankTradeApply
          } else {
            this.showsec = false
            this.formData = storeInnerBankTradeApply
            this.formData.accountNo = this.formData.currentAccount
            this.formData.dan = '日'
          }
        this.formData1 = user
        this.recordShen = list
        if(storeInnerBankTradeApply.warn != null) {
          this.tishiMessage = storeInnerBankTradeApply.warn
        }
        let accountId = sessionStorage.getItem('accountId')
        if(accountId != undefined) {
          this.getAccountInfo(accountId)
        }
        let typedata = sessionStorage.getItem('typedata')
        if(typedata != undefined) {
          this.TypeData = JSON.parse(typedata)
          this.reason = this.TypeData.reason
          if(this.TypeData.depositMethod == '定期') {
            this.showsec = false
          }
        }
      })
    },
    
  },
  mounted() {
    
    //申请人信息
    let user = JSON.parse(sessionStorage.getItem('user'))
    this.formData1 = user
    
    this.getInterBankInfo(this.$route.query.applyId)
  },
};
</script>

<style lang="scss">
#editNostro {
  // .el-dialog__wrapper{
  //       background: rgba(255,255,255,0.5);
  // }
  .el-input__inner{
    background: transparent;
    color: white;
    border: 0
  }

  .tableBox {
    padding-top: 10;
    color: white;
    .formlist{
      .el-form-item{
        width:49%;
        margin:0;
        border: 1px solid white;
        .el-form-item__label, .el-form-item__content{
            padding: 6px 2px;
            border-right: 1px solid white;
        }
        .el-form-item__label{
          text-align: center;
            width:45%;
            box-sizing: border-box;
            background: #353a3acc;
            color:white;
        }
        .el-form-item__content{
          width:55%;
          text-align: center;
          background: rgba(53,58,58,0.55);
          box-sizing: border-box;
        }
      }
    }
    .el-table__empty-text{
      color:white;
    }
    .tableTitle {
      line-height: 36px;
      padding-left: 20px;
      margin: 12px 0;
    }
    table {
      
      border: 1px solid white;
      width: 100%;
      text-align: center;
      border-collapse: collapse;
       .el-table tr{
          background: transparent;
      }
      // margin-bottom: 20px;
      tr {
        td {
          
          &:nth-child(odd) {
            background: rgba(53, 58, 58, 0.55);
          }
          &:nth-child(even) {
            background: rgba(53, 58, 58, 0.55);
          }
        }
      }
    }
    .riskTip {
      .fxtq {
        margin-bottom: 20px;
      }
      .fxcon {
        border: 1px solid white;
        background-color: #4d534e;
        padding: 20px;
        margin-bottom: 20px;
      }
    }
    .btn {
      text-align: center;
      margin-top:20px;
    }
  }
  .DiaFxcon {
    background-color: white;
  }
  .el-radio-group{
    width:100%;
    height: 320px;
    overflow-y: scroll;
    .el-radio{
      margin-bottom: 15px;
      width: 100%;
      display: block;
       .el-radio__label {
        width: 80%;
        display: inline-block;
          
        .user_name, .user_part {
              padding: 15px;
              width: 48%;
              display: inline-block;
              text-align: center;
              border: 1px solid #efefef
            }
      }  
     
    }
     .el-radio+.el-radio{
        margin-left: 0
      }
  }
}
</style>
